<template>
    <div class="checkout-page">
        <div class="header">
            <h1>确认订单</h1>
        </div>

        <div class="order-items">
            <div v-for="item in cart" :key="item.id" class="order-item">
                <div class="item-info">
                    <h3>{{ item.name }}</h3>
                    <p class="price">¥{{ item.price }}</p>
                </div>
                <div class="quantity-controls">
                    <button @click="decreaseQuantity(item.id)" class="qty-btn">-</button>
                    <span class="quantity">{{ item.quantity }}</span>
                    <button @click="increaseQuantity(item.id)" class="qty-btn">+</button>
                </div>
                <div class="item-total">
                    ¥{{ item.price * item.quantity }}
                </div>
            </div>
        </div>

        <div class="order-summary">
            <div class="summary-row">
                <span>总计</span>
                <span class="total">¥{{ cartTotal }}</span>
            </div>
        </div>

        <div class="actions">
            <button @click="goBack" class="back-btn">返回点餐</button>
            <button @click="next" class="next-btn">下一步</button>
        </div>
    </div>
</template>

<script>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useOrderStore } from '../store/orderStore'

export default {
    name: 'CheckoutPage',
    setup() {
        const router = useRouter()
        const orderStore = useOrderStore()

        const cart = computed(() => orderStore.cart)
        const cartTotal = computed(() => orderStore.cartTotal)

        const increaseQuantity = (itemId) => {
            orderStore.updateCartItemQuantity(itemId, cart.value.find(item => item.id === itemId).quantity + 1)
        }

        const decreaseQuantity = (itemId) => {
            orderStore.updateCartItemQuantity(itemId, cart.value.find(item => item.id === itemId).quantity - 1)
        }

        const goBack = () => {
            router.push('/menu')
        }

        const next = () => {
            if (window.outerParams.deskCode) {
                router.push('/payment')
            } else {

                router.push('/delivery')
            }
        }

        return {
            cart,
            cartTotal,
            increaseQuantity,
            decreaseQuantity,
            goBack,
            next
        }
    }
}
</script>

<style scoped>
.checkout-page {
    padding: 20px;
    padding-bottom: 80px;
}

.header h1 {
    color: #333;
    margin-bottom: 20px;
}

.order-items {
    margin: 20px 0;
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.item-info h3 {
    margin-bottom: 5px;
}

.price {
    color: #666;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-btn {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

.quantity {
    min-width: 20px;
    text-align: center;
}

.item-total {
    color: #42b983;
    font-weight: bold;
    min-width: 60px;
    text-align: right;
}

.order-summary {
    margin: 20px 0;
    padding: 15px;
    background-color: #f8f8f8;
    border-radius: 8px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: bold;
}

.total {
    color: #42b983;
}

.actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 0 auto;
}

.back-btn,
.next-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.back-btn {
    background-color: #f0f0f0;
    color: #333;
}

.next-btn {
    background-color: #42b983;
    color: white;
}
</style>